<html>
  <head>
  <style type="text/css">
    label {
      width: 10%;
      display: inline-block;
    }
    input {
      width: 70%;
      display: inline-block; 
    }
    input[type=button] {
      width: 10%;
    }
  </style>
  <script type="text/javascript">
  function printLength(data) {
    if (data == null)
      document.getElementById("plength").innerHTML = null;
    else  
      document.getElementById("plength").innerHTML = "Length: " + data.length;
  }
  
  function setHex(data) {
    var res = "";
    for (var i = 0; i < data.length; i++) {
      h = data.charCodeAt(i).toString(16);
      if(h.length == 1)
        res +=  "0" + h;
      else
        res += h;
    }
    document.form.hex.value = res;
  }
  
  function fromhex() {
    hex = document.form.hex.value.replace("0x", "").replace(" ", "").replace(",", "");
    if(hex.length % 2 > 0) {
      document.form.string.value = "";
      document.form.base64.value = "";
      printLength(null);
      alert("Wrong hex");
      return;
    }
    var data = ""
    for (var i = 0; i < hex.length; i += 2) {
      c = parseInt(hex.substr(i, 2), 16);      
      data += String.fromCharCode(c);
    } 
    document.form.string.value = data;
    document.form.base64.value = btoa(data);
    printLength(data);
  }
  
  function frombase64() {
    var data;
    try {
      data = atob(document.form.base64.value);
    } catch(e) {
      document.form.string.value = "";
      document.form.hex.value = "";
      printLength(null);
      alert("Wrong base64: " + e.toString());
      return;
    }
    document.form.string.value = data;
    setHex(data);
    printLength(data);
  }
  
  function fromstring() {
    var data = document.form.string.value;
    document.form.base64.value = btoa(data);
    setHex(data);
    printLength(data);
  }
  </script>
  </head>
  <body>  
    <form name="form">
      <label>Hex: </label><input type="text" id="hex"> <input type="button" value="Convert from Hex" onClick="fromhex();"><br>
      <label>Base64: </label><input type="text" id="base64"> <input type="button" value="Convert from Base64" onClick="frombase64();"><br>
      <label>String: </label><input type="text" id="string"> <input type="button" value="Convert from String" onClick="fromstring();"><br>
      <label id="plength"></label><br>
    </form>  
  </body>
</html> 